<script>
    var requireJS = [];
    loadJS(requireJS, "js/views/monitor/ddalmonitor.js");
</script>
<div class="animated fadeIn">
    <div class="row">
        <div class="col-lg-12">
            <div class="card">
                <div class="card-header">
                    <div class="row">
                        <div class="col-md-8">
                            <i class="fa fa-align-justify"></i> 查询条件
                        </div>
                        <div class='form-group col-sm-6'>
                            <label for="datetimepicker_b">开始时间：</label>
                            <!--指定 date标记-->
                            <div class='input-group date' id='datetimepicker_b'>
                                <input type='text' class="form-control form-datetime" id="accepttime_b"  readonly="readonly"/>
                                <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
                            </div>
                        </div>
                        <div class='form-group col-sm-6'>
                            <label for="datetimepicker_e">结束时间：</label>
                            <!--指定 date标记-->
                            <div class='input-group date' id='datetimepicker_e'>
                                <input type='text' class="form-control form-datetime" id="accepttime_e"  readonly="readonly"/>
                                <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
                            </div>
                        </div>
                        <div class="form-group col-sm-6">
                            <label for="appName_s">应用名称</label>
                            <select id="appName_s" name="appName_s" class="form-control form-control-sm">
                            </select>
                        </div>
                        <div class="form-group col-sm-6">
                            <label for="sql_type_s">sql类型</label>
                            <select id="sql_type_s" name="sql_type_s" class="form-control form-control-sm">
                                <option value=''>请选择sql类型</option>
                                <option value='insert'>INSERT</option>
                                <option value='delete'>DELETE</option>
                                <option value='update'>UPDATE</option>
                                <option value='select'>SELECT</option>
                            </select>
                        </div>
                        <div class="form-group col-sm-6">
                            <label for="processtime_s">处理时长&gt;=</label>
                            <input id="processtime_s" name="processtime_s" class="form-control form-control-sm">
                            </input>
                        </div>
                        <div class="form-group col-sm-6">
                            <label for="issuccess_s">是否执行成功</label>
                            <select id="issuccess_s" name="issuccess_s" class="form-control form-control-sm">
                                <option value=''>请选择</option>
                                <option value='Y'>是</option>
                                <option value='N'>否</option>
                            </select>
                        </div>
                        <div class="form-group col-sm-6">
                            <span class="input-group-btn">
                                <button id="search-log" type="button" class="btn btn-primary"><i
                                    class="fa fa-search"></i> 查询</button>
                            </span>
                        </div>
                    </div>
                </div>
                <div class="card-block pre-scrollable" style="white-space:nowrap">
                    <table class="table table-sm table-striped" >
                        <thead>
                        <tr>
                            <th style="width: 3%">序号</th>
                            <th style="width: 4%">日志id</th>
                            <th style="width: 2%">应用名</th>
                            <th style="width: 4%">开始时间</th>
                            <th style="width: 4%">结束时间</th>
                            <th style="width: 2%">处理时长</th>
                            <th style="width: 2%">sql类型</th>
                            <th style="width: 10%">分片</th>
                            <th style="width: 5%">主机/IP</th>
                            <th style="width: 10%">表</th>
                            <th style="width: 7%">原始sql</th>
                            <th style="width: 10%">参数</th>
                            <th style="width: 2%">数据库用户</th>
                            <th style="width: 2%">数据源</th>
                            <th style="width: 2%"> 是否成功</th>
                            <th style="width: 8%">异常信息</th>
                            <th style="width: 4%">创建时间</th>
                            <th style="width: 4%">采集时间</th>
                            <th style="width: 7%">解析sql</th>
                            <th style="width: 8%">执行计划</th>
                        </tr>
                        </thead>
                        <tr name="table-row-template" style="display: none;">
                            <td name="table-row-id"></td>
                            <td name="table-row-traceId"></td>
                            <td name="table-row-appName"></td>
                            <td name="table-row-startTime"></td>
                            <td name="table-row-endTime"></td>
                            <td name="table-row-processTime"></td>
                            <td name="table-row-sqlType"></td>
                            <td name="table-row-shardsStr"></td>
                            <td name="table-row-hostIp"></td>
                            <td name="table-row-tablesStr"></td>
                            <td name="table-row-sql"></td>
                            <td name="table-row-parametersStr"></td>
                            <td name="table-row-dbUsersStr"></td>
                            <td name="table-row-dataSourcesStr"></td>
                            <td name="table-row-sucess"></td>
                            <td name="table-row-errorMsg"></td>
                            <td name="table-row-createTime"></td>
                            <td name="table-row-acceptTime"></td>
                            <td name="table-row-finalSqlStr"></td>
                            <td name="table-row-plan"></td>
                        </tr>
                        <tbody id="table-body">
                        </tbody>
                    </table>
                    <ul class="pagination">
                      <li class="page-item"><a id="prevpage" data-paging-type="prev" class="page-link" href="#">Prev</a>
                      </li>
                      <li class="page-item active">
                        <a id="firstpage" data-paging-type="first"  class="page-link" href="#">首页</a>
                      </li>
                      <li class="page-item">
                          <a id="currentpage" data-paging-type="current"  class="page-link" href="#">当前页：1</a>
                      </li>
                      <!--<li class="page-item"><a class="page-link" href="#">2</a>
                      </li>
                      <li class="page-item"><a class="page-link" href="#">3</a>
                      </li>
                      <li class="page-item"><a class="page-link" href="#">4</a>
                      </li>-->
                      <li class="page-item"><a id="nextpage" data-paging-type="next" class="page-link" href="#">Next</a>
                      </li>
                    </ul>
                </div>
            </div>
        </div>
        <!--/.col-->
    </div>
</div>